
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <meta name="viewport" content="width=device-width,initial-scale=1"></meta>
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc."></meta>
        <meta name="author" content="Coderthemes"></meta>

        <link rel="shortcut icon" href="assets/images/favicon_1.ico"></link>

        <title>CRM后台管理</title>

        <!-- DataTables -->
        <link href="/plugins/datatables/jquery.datatables.min.css" rel="stylesheet" type="text/css"></link>
        <link href="/plugins/datatables/buttons.bootstrap.min.css" rel="stylesheet" type="text/css"></link>
        <link href="/plugins/datatables/fixedHeader.bootstrap.min.css" rel="stylesheet" type="text/css"></link>
        <link href="/plugins/datatables/responsive.bootstrap.min.css" rel="stylesheet" type="text/css"></link>
        <link href="/plugins/datatables/scroller.bootstrap.min.css" rel="stylesheet" type="text/css"></link>


		<link href="/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet"></link>
		<link href="/plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet"></link>
		
        <link href="/plugins/switchery/switchery.min.css" rel="stylesheet"></link>
        <link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css"></link>
        <link href="/assets/css/core.css" rel="stylesheet" type="text/css"></link>
        <link href="/assets/css/icons.css" rel="stylesheet" type="text/css"></link>
        <link href="/assets/css/components.css" rel="stylesheet" type="text/css"></link>
        <link href="/assets/css/pages.css" rel="stylesheet" type="text/css"></link>
        <link href="/assets/css/menu.css" rel="stylesheet" type="text/css"></link>
        <link href="/assets/css/responsive.css" rel="stylesheet" type="text/css"></link>

        <script src="/assets/js/modernizr.min.js"></script>

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
<style type="text/css">
table.dataTable tbody tr.selected {
    background-color: #B0BED9;
}
table.dataTable tbody tr.odd.selected {
    background-color: #acbad4;
}
</style>
    </head>

    <body class="fixed-left">
        
        <!-- Begin page -->
        <div id="wrapper">
        
            <!-- Top Bar Start -->
            <div class="topbar">

                <!-- LOGO -->
                <div class="topbar-left">
                    <div class="text-center">
                        <a href="index.html" class="logo"><i class="md md-equalizer"></i> <span>SPRINGBOOT-CRM</span> </a>
                    </div>
                </div>

                <!-- Navbar -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">
                        <div class="">
                            <div class="pull-left">
                                <button class="button-menu-mobile open-left waves-effect">
                                    <i class="md md-menu"></i>
                                </button>
                                <span class="clearfix"></span>
                            </div>

                            <ul class="nav navbar-nav navbar-right pull-right">
         
                                <li class="hidden-xs">
			                        <a href="" class="dropdown-toggle profile" data-toggle="dropdown" aria-expanded="true">
			                            <img  src="/assets/images/users/avatar-2.jpg" alt="user-img" class="img-circle"></img>
			                        </a>
			                        <ul class="dropdown-menu">
			                            <li><a href="javascript:void(0)"><i class="md md-face-unlock"></i> Profile</a></li>
			                            <li><a href="javascript:void(0)"><i class="md md-settings"></i> Settings</a></li>
			                            <li><a href="javascript:void(0)"><i class="md md-lock"></i> Lock screen</a></li>
			                            <li><a href="javascript:void(0)"><i class="md md-settings-power"></i> Logout</a></li>
			                        </ul>
                                </li>

                            </ul>
                        </div>
                        <!--/.nav-collapse -->
                    </div>
                </div>
            </div>
            <!-- Top Bar End -->


            <!-- ========== Left Sidebar Start ========== -->
            <div class="left side-menu">
                <div class="sidebar-inner slimscrollleft">

                    <div id="sidebar-menu">
                        <ul>
							<li class="menu-title">Main</li>
                            <li>
                                <a href="#" class="waves-effect waves-primary"><i
                                        class="ti-home"></i><span> 主页 </span></a>
                            </li>
                            <li>
                                <a href="student.html" class="waves-effect waves-primary active"><i
                                        class="ti-menu-alt"></i><span> 数据管理 </span></a>
                            </li>
                            <li>
                                <a href="file.html" class="waves-effect waves-primary"><i
                                        class="ti-import"></i><span> 数据导入 </span></a>
                            </li>
                            <li>
                                <a href="#" class="waves-effect waves-primary"><i
                                        class="ti-archive"></i><span> 回收站 </span></a>
                            </li>
                           
                        </ul>
                        <div class="clearfix"></div>
                    </div>

                    <div class="clearfix"></div>
                </div>

            </div>
            <!-- Left Sidebar End -->



            <!-- ============================================================== -->
            <!-- Start right Content here -->
            <!-- ============================================================== -->                      
            <div class="content-page">
                <!-- Start content -->
                <div class="content">
                    <div class="container">

                        <!-- Page-Title -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="page-title-box">
                                    <ol class="breadcrumb pull-right">
                                        <li><a href="#">Minton</a></li>
                                        <li><a href="#">Tables</a></li>
                                        <li class="active">Datatable</li>
                                    </ol>
                                    <h4 class="page-title">Datatable</h4>
                                </div>
                            </div>
                        </div>
                                
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card-box table-responsive">
                                	<form action="#" class="form-horizontal high-query-form">
											<table class="table">
												<tbody>
													<tr>
														<td class="span2" bgcolor="#F3F3F3"><label class="control-label">姓名：</label></td>
														<td>
															<input class="form-control" id="name" value="" type="text"></input>
														</td>
														<td class="span2" bgcolor="#F3F3F3"><label class="control-label">手机：</label></td>
														<td>
															<input class="form-control" id="mobile" value="" type="text"></input>
														</td>
														<td class="span2" bgcolor="#F3F3F3"><label class="control-label">邮箱：</label></td>
														<td>
															<input class="form-control" id="mail" value="" type="text"></input>
														</td>
													</tr>
													<tr>
													    <td class="span2" bgcolor="#F3F3F3"><label class="control-label">时间：</label></td>
														<td colspan="5">
															<div class="input-daterange input-group" id="date-range">
																<input type="text" class="form-control" id="start"></input>
																<span class="input-group-addon bg-primary b-0 text-white">to</span>
																<input type="text" class="form-control" id="end"></input>
															</div>
														</td>
													</tr>
													<tr>
														<td colspan="6" style="text-align: center;">
															<button class="btn btn-small btn-primary waves-effect" type="button" onclick="search()"><i class="fa fa-cloud m-r-5"></i>&nbsp;&nbsp;查&nbsp;&nbsp;询&nbsp;&nbsp;</button>															
															<button class="btn btn-small btn-warning waves-effect" type="button" onclick="onReset()"><i class="fa fa-cloud m-r-5"></i>重&nbsp;&nbsp;置&nbsp;&nbsp;查&nbsp;&nbsp;询</button>															
														</td>
													</tr>
													<tr>
														<td colspan="6"></td>
													</tr>													
							</tbody>
								</table>
									</form>
									</div></div></div>
									
                           <div class="row">
                                    <div class="col-lg-12">
                                        <div class="btn-toolbar m-t-20" role="toolbar">
                                            <div class="btn-group">
                                    <button class="btn btn-danger waves-effect waves-light m-b-5"> <i class="fa fa-money m-l-5"></i> <span>已签约</span> </button>
                                    <button class="btn btn-success waves-effect waves-light m-b-5"> <i class="fa fa-check m-r-5"></i> <span>有效</span> </button>
                                    <button class="btn btn-warning waves-effect waves-light m-b-5"> <i class="fa fa-times-rectangle m-r-5"></i> <span>无效</span> </button>
                                    <button class="btn btn-pink waves-effect waves-light m-b-5"> <i class="fa fa-phone m-r-5"></i> <span>未打</span> </button>
                                    <button class="btn btn-info waves-effect waves-light m-b-5"> <i class="fa  fa-exclamation m-r-5"></i> <span>无人接听</span> </button>
                                    <button class="btn btn-purple waves-effect waves-light m-b-5"> <i class="fa fa fa-map-signs m-l-5"></i> <span>未来深</span> </button>                                          
                                            </div>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-primary waves-effect waves-light  dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                                                  		备注
                                                  <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                  <li><a href="#">培训</a></li>
                                                  <li><a href="#">有经验</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
									
						<div class="row m-t-20">
                            <div class="col-sm-12">
                                <div class="card-box table-responsive">
									<hr></hr>
                                    <table id="stu-datatable" class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>姓名</th>
                                                <th>手机</th>
                                                <th>邮箱</th>
                                                <th>性别</th>
                                                <th>学历</th>
                                                <th>导入时间</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>

                                        <tbody>
											  <tr th:each="student,iterStat : ${list}"> 
											     <th>
									                <input type="checkbox" class="checkall" />
									             </th>
											     <th scope="row" th:text="${student.id}"></th>
											     <td th:text=" ${student.name}"></td>
											     <td th:text="${student.mobile}"></td>
											     <td th:text="${student.mail}"></td>
											     <td th:text="${student.sex}"></td>
											     <td th:text="${student.education}"></td>
											     <td>
											     	<a href="#" class="on-default edit-row"><i class="fa fa-file-text-o"></i></a>
											     	<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i></a>
											     	<!-- <a href="#" class="on-default remove-row"><i class="fa fa-trash-o"></i></a> -->
											     	<a href="#" class="on-default remove-row"><i class="fa fa-phone"></i></a>
											     </td>
											 </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- end container -->

                </div>
                <!-- end content -->

                <!-- FOOTER -->
                <footer class="footer text-right">
                    2017 © Minton.
                </footer>
                <!-- End FOOTER -->
            </div>
            <!-- ============================================================== -->
            <!-- End Right content here -->
            <!-- ============================================================== -->

        </div>
        <!-- END wrapper -->

                                    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" style="display: none;">
                                        <div class="modal-dialog modal-sm">
                                            <div class="modal-content">
                                                   <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                                    <h4 class="modal-title" id="custom-width-modalLabel">信息</h4>
                                                </div>
                                                <div class="modal-body">
                                                    <p>确认执行此操作？</p>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                                                    <button type="button" class="btn btn-primary waves-effect waves-light" onclick="operator()">确认</button>
                                                </div>
                                            </div><!-- /.modal-content -->
                                        </div><!-- /.modal-dialog -->
                                    </div><!-- /.modal -->
                                    
    
        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="/assets/js/jquery.min.js"></script>
        <script src="/assets/js/bootstrap.min.js"></script>
        <script src="/assets/js/detect.js"></script>
        <script src="/assets/js/fastclick.js"></script>
        <script src="/assets/js/jquery.slimscroll.js"></script>
        <script src="/assets/js/jquery.blockUI.js"></script>
        <script src="/assets/js/waves.js"></script>
        <script src="/assets/js/wow.min.js"></script>
        <script src="/assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>
        <script src="/plugins/switchery/switchery.min.js"></script>

        <!-- Datatables-->
        <script src="/plugins/datatables/jquery.dataTables.min.js"></script>
        <script src="/plugins/datatables/dataTables.bootstrap.js"></script>
        <script src="/plugins/datatables/dataTables.buttons.min.js"></script>
        <script src="/plugins/datatables/buttons.bootstrap.min.js"></script>
        <script src="/plugins/datatables/jszip.min.js"></script>
        <script src="/plugins/datatables/pdfmake.min.js"></script>
        <script src="/plugins/datatables/vfs_fonts.js"></script>
        <script src="/plugins/datatables/buttons.html5.min.js"></script>
        <script src="/plugins/datatables/buttons.print.min.js"></script>
        <script src="/plugins/datatables/dataTables.fixedHeader.min.js"></script>
        <script src="/plugins/datatables/dataTables.keyTable.min.js"></script>
        <script src="/plugins/datatables/dataTables.responsive.min.js"></script>
        <script src="/plugins/datatables/responsive.bootstrap.min.js"></script>
        <script src="/plugins/datatables/dataTables.scroller.min.js"></script>

        <!-- Datatable init js -->
        <script src="/assets/pages/datatables.init.js"></script>

        <script src="/plugins/moment/moment.js"></script>
     	<script src="/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
     	<script src="/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
     	
     	<!-- Notification js -->
        <script src="/plugins/notifyjs/dist/notify.min.js"></script>
        <script src="/plugins/notifications/notify-metro.js"></script>
        
        
        <script src="/assets/js/jquery.core.js"></script>
        <script src="/assets/js/jquery.app.js"></script>

        <script type="text/javascript">
        
        	var table;
			function search () {
				 table.ajax.reload( null, false ); // 刷新表格数据，分页信息不会重置
			}
			function onReset () {
				$(".high-query-form")[0].reset();
				table.ajax.reload( null, false );
			}		
			
			var url;
			function remove (data) {
				url = "/student/remove/" + data;
				$(".bs-example-modal-sm").modal("show");
			}
			
			function operator() {
				commonAJAX (url,"",table);
				$(".bs-example-modal-sm").modal("hide");
			}
						
            $(document).ready(function() {
               table = $('#stu-datatable').DataTable( {
               		"bProcessing" : true,
               		"autoWidth": false,
               		"searching": false,
               		"fnServerParams" : function (aoData) {
							aoData.push(
							{ "name": "name", "value": $("#name").val() },
							{ "name": "mobile", "value": $("#mobile").val() },
							{ "name": "mail", "value": $("#mail").val() },
							{ "name": "start", "value": $("#start").val() },
							{ "name": "end", "value": $("#end").val() }
							);
						},
                    language: {
				        "sProcessing": "处理中...",
				        "sLengthMenu": "显示 _MENU_ 项结果",
				        "sZeroRecords": "没有匹配结果",
				        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
				        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
				        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
				        "sInfoPostFix": "",
				        "sSearch": "搜索:",
				        "sUrl": "",
				        "sEmptyTable": "表中数据为空",
				        "sLoadingRecords": "载入中...",
				        "sInfoThousands": ",",
				        "oPaginate": {
				            "sFirst": "首页",
				            "sPrevious": "上页",
				            "sNext": "下页",
				            "sLast": "末页"
				        },
				        "oAria": {
				            "sSortAscending": ": 以升序排列此列",
				            "sSortDescending": ": 以降序排列此列"
				        }
				    },
                 "ajax": "/students" ,
                 order: [ 1, 'asc' ],
		        "columns": [
			        { data: "name"},
			        { data: "mobile" },
			        { data: "mail" },
			        { data: "sex" },
			        { data: "education" },
			        { data: "inserttime" },
			        {
		                 "sClass": "text-center",
		                 "render": function (data, type, full, meta) {
		                     return '<a href="javascript:void(0)" class="on-default edit-row" onclick="get('+full.mobile+')"><i class="fa fa-file-text-o text-info"></i></a>&nbsp;&nbsp;'+
									'<a href="javascript:void(0)" class="on-default edit-row" onclick="edit('+full.mobile+')"><i class="fa fa-pencil text-purple"></i></a>&nbsp;&nbsp;'+
									'<a href="javascript:void(0)" class="on-default remove-row" onclick="remove('+full.mobile+')"><i class="fa fa-trash-o text-danger"></i></a>&nbsp;&nbsp;';
		                 },
		                 orderable: false
		             }
			        ]
                 } );
                 
                $('#date-range').datepicker({
                	format: "yyyy-mm-dd",
                    toggleActive: true
                });
                	
                	
                	$('#stu-datatable tbody').on( 'click', 'tr', function () {
						$(this).toggleClass('selected');
						var i = table.rows('.selected').data().length;
						if (i>0) {
						 	$('.btn-group .btn').attr('disabled',false);
						} else {
						   $('.btn-group .btn').attr('disabled',true);
						}
					} );
					
 						$('.btn-group .btn').attr('disabled',true);
					
					    $('#button').click( function () {
					        alert( table.rows('.selected').data().length +' row(s) selected' );
					    } );
    
            } );
			  //TableManageButtons.init();
        
			function commonAJAX (url,data,table) {
				$.ajax({
					url : url,
					data : data,
					async: false,
					dataType : "JSON",
					type : "post",
					success : function (data,textstatus) {
						if (data.success == true) {
							$.Notification.autoHideNotify('success', 'top right', '通知', '操作成功');
						} else {
							$.Notification.autoHideNotify('error', 'top right', '通知', '操作失败');
						}
						
						table.ajax.reload( null, false );
					},
		            error : function(data,textstatus){
		            	$.Notification.autoHideNotify('error', 'top right', '通知', '操作失败');
		            } 
				})		
			
			}        
        </script>
    
    </body>
</html>